<template>
	<div class="row-item">
		<div class="title"><span>{{props.label}}</span></div>
		<div style="display: flex;width: 100%;">
			<el-time-picker
				size="small"
				v-model="input_model"
				placeholder="请选择时间"
				value-format="hh:mm"
				 @change="onchange"
			    />
		</div>
	</div>
</template>

<script lang="ts" setup>
	const input_model=ref();
	const size=ref('small');
	const props=defineProps({
		pidentifier:String,
		identifier:String,
		label:String,
		required:Boolean,
		value:String,
		size:String,
	})
	
	watch(props,() => {
			input_model.value=props.value
			if(props.size){
				size.value=props.size
			}
		},
	    { immediate: true, deep: true },
	)

	const emits = defineEmits(['onchange'])
	const onchange=()=>{
		emits('onchange',{
			pidentifier:props.pidentifier,
			identifier:props.identifier,
			value:input_model.value
		})
	}
</script>

<style scoped>
</style>